import React from 'react';
import { CaretRightOutlined } from '#/utils/antdIcons.js';
import styles from './index.less';

export default ({ value = false, onChange = () => {}, position }) => {
  let wrapStyle = {};
  let iconStyle = {};
  if (position === 'left') {
    wrapStyle.left = 0;
    wrapStyle.borderRadius = '0 20px 20px 0';
    iconStyle.transform = value ? 'rotate(0)' : 'rotate(180deg)';
  } else if (position === 'right') {
    wrapStyle.right = 0;
    wrapStyle.borderRadius = '20px 0 0 20px';
    iconStyle.transform = value ? 'rotate(180deg)' : 'rotate(0)';
  }
  return (
    <div className={styles.tjArrow} style={wrapStyle} onClick={() => onChange(!value)}>
      <CaretRightOutlined style={iconStyle} />
    </div>
  );
};
